<template>
  <view class="content">
    <image class="logo" @click="SeeImg" :src="img_src" />
    <view class="text-area">
      
    <uni-icons type="camera-filled" size="25"></uni-icons>
     <button @click="select">上传</button>
    </view>
    <view v-show="pow">
      加载中...
    </view>
    <view v-show="!pow">结果：{{ resualt }}</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const pow=ref(false)
const resualt=ref<string>('')
const img_src=ref('/static/logo.png')

const select=()=>{
uni.chooseImage({
  count:1,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:(success)=>{
  
    img_src.value=success.tempFilePaths
    console.log(img_src.value)
    console.log(success.tempFiles)
    pow.value=true
    uni.uploadFile({
      url:'http://162.14.114.252:5000',
      filePath:img_src.value[0],
      name:'file',
      success:(res)=>{
        pow.value=false
        console.log(res)
        resualt.value=JSON.parse(res.data).type
        console.log(resualt.value)
 
        
      },
      fail:(res)=>{
        pow.value=false
       uni.showToast({
        title:"请求失败请重试！",
        icon:"none"
       })
        console.log('请求失败')
      }
    })
    console.log('ok1')

  },
})
  // console.log('选择文件：',e)
}
const SeeImg=()=>{
  uni.previewImage({
    urls:img_src.value,
    current:1,
  })
}



</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
